<template>
  <van-overlay :show="isShow" @click="$emit('onClose')" :lock-scroll="false">
    <div class="cont">
      <img class="top" src="http://content.daylucky.cn/admin/image/vuityoi1u13dpobsx0udem30.png" alt="">
      <div class="title">填写你的昵称</div>
      <input type="text" v-model="userInfo.nick_name" class="nickName mb-20" placeholder="输入昵称">
      <div class="flex_b_c title">
        <div class="mr-65">{{ owned ? '填写你的生日' : '填写TA的生日'}}</div>
        <div :class="['type flex_a_c mr-20', birthType === 1 && 'on']" @click="birthType = 1">
          <img v-if="birthType === 1" src="http://content.daylucky.cn/admin/image/eits6uoubpa638ohkigmsybl.png" alt="">
          <img v-else src="http://content.daylucky.cn/admin/image/42kutfsy0c0dar01wxft8t64.png" alt="">
          公历
          </div>
        <!-- <div :class="['type flex-align-center', birthType === 2 && 'on']" @click="birthType = 2"><img  :src="require(`@/assets/image/choose_${ birthType === 2 ? 'active':'normal'}.png`)" alt="">阴历</div> -->
      </div>
      <DatePicker @on-success="e => userInfo.birth_day = e">
        <input disabled type="text" v-model="userInfo.birth_day" class="nickName"  placeholder="输入生日">
      </DatePicker>
      <p class="tips">*结果与您的姓名、生日息息相关，为确保结果准确性，请准确填写相关信息。</p>
      <img class="sure_btn" @click="onSubmit" src="http://content.daylucky.cn/admin/image/7yfif2eqwvgctcerg1ofhc61.png" alt="">
      <img v-if="isShowClose" class="close_btn" @click="onClose" src="http://content.daylucky.cn/admin/image/vnwm5bpb0ge0e2u8tgrddb5r.png" alt="">
    </div>
  </van-overlay>
</template>
<script>
import DatePicker from './datePicker.vue'
import { postUserUpdate } from '@/api'
export default {
  components: { DatePicker },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    owned: {
      type: Boolean,
      default: true
    },
    isShowClose: {
      type: Boolean,
      default: true
    },
  },
 
  data() {
    return {
      birthType: 1,
      userInfo: {
        nick_name: '',
        birth_day: '',
      },
    }
  },
  methods: {
    onClose() {
      this.$emit('update:isShow', false)
      this.$emit('on-fail')
    },
    async onSubmit() {
      if (!this.userInfo.nick_name) {
        uni.showToast('请填写昵称')
        return false
      }
      if (!this.userInfo.birth_day) {
        uni.showToast('请填写生日')
        return false
      }
      if (this.owned) {
        const { code, data } = await postUserUpdate(this.userInfo)
        if (code === 1000) {
          this.$storage.setStorage('self_nick_name', this.userInfo.nick_name)
          this.$emit('on-success')
        }
      } else {
        this.$storage.setStorage('other_nick_name', this.userInfo.nick_name)
        this.$emit('on-success')
      }
      this.userInfo = {
        nick_name: '',
        birth_day: '',
      }
    }
  }
}
</script>
<style lang="scss" scoped>

.cont {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
  padding-top: 118rpx;
  padding-left: 48rpx;
  padding-right: 48rpx;
  width: 654rpx;
  height: 754rpx;
  background: linear-gradient( 180deg, #170A1C 0%, #4A2959 100%);
  border-radius: 16rpx;
  .top {
    width: 168rpx;
    height: 168rpx;
    position: absolute;
    left: 50%;
    top: -82rpx;
    transform: translateX(-50%);
  }
  .title {
    font-weight: 400;
    font-size: 30rpx;
    color: #F6E9C9;
    line-height: 72rpx;
    height: 72rpx;
    font-family: WDCH-Regular;
  }
  .nickName {
    width: 558rpx;
    height: 96rpx;
    background: rgba(0,0,0,0.1);
    border-radius: 24rpx;
    border: 2rpx solid rgba(246,233,201,0.2);
    padding-left: 24rpx;
    font-size: 30rpx;
    color: rgba(246,233,201,0.5);
    line-height: 96rpx;
    font-family: WDCH-Regular;

  }
  .type {
    font-family: WDCH-Regular;
    color: rgba(246, 233, 201, 0.50);
    img {
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
    &.on {
      color: #F6E9C9;
    }
  }
  .tips {
    font-weight: 400;
    font-size: 24rpx;
    color: #F6E9C9;
    line-height: 34rpx;
    margin-top: 16rpx;
  }
  .sure_btn {
    margin: 32rpx auto 0;
    width: 558rpx;
    height: 96rpx;
  }
  .close_btn {
    position: absolute;
    width: 72rpx;
    height: 72rpx;
    left: 50%;
    margin-left: -36rpx;
    bottom: -144rpx;
  }
}
</style>